<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.8.2.min.js"></script>
    <script src="../js/stomp.js"></script>
</head>
<body>
<h3>原生webSocket测试</h3>
<br>
<div >
    连接状态及收到的信息：<div style="border: solid red 2px ; width: 400px" id="connectState" style="font-size: 14px"></div>
</div>
<br/>
websocket接入点
<br>
<input style="width: 400px;font-size: 16px" id="endPoint" type="text" value="ws://localhost:8010/sshSocket">
<br>
<br>
Sec-WebSocket-Protocol（请求头信息）
<br>
<input style="width: 400px;font-size: 16px" id="protocol" type="text" value="auth-001">
<br><br>
<button onclick="createConnect()">建立websocket连接</button>
<button onclick="closeWebSocket()">关闭连接</button>
<br>
<hr>
<br>

单个发送消息：<textarea  id="pointMsg" style="width: 400px; height: 100px" id="pointMsg" type="text" >
    {
	"cols": 0,
	"command": "ls",
	"host": "172.16.154.99",
	"operate": "connect",
	"password": "kedacom888",
	"port": 22,
	"rows": 0,
	"username": "root"
   }
</textarea>
<button onclick="pointSendMsg()">建立ssh通道</button>
<br>
<br>
<hr>
jquery可以实现响应式，监听input框数据变化，实时发送请求
<br><br>
发送shell命令：（响应式发送,回车提交命令）<input style="width: 400px;font-size: 16px" id="commandInput" type="text" >
<div id="sendCommand"></div>

</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    function createConnect() {
        if ('websocket' in window) {
            endpint = $("#endPoint").val()
            headMsg = $("#protocol").val()
            initWebsocket(endpint, headMsg)
        } else {
            alert('当前浏览器 Not support websocket');
        }


    }


    function initWebsocket(endpoint ,headMsg) {
        //开始建立socket连接
        websocket = new WebSocket(endpint , headMsg)
        if (websocket !== null){
            //连接发生错误的回调方法
            websocket.onerror = function () {
                $("#connectState").text("WebSocket连接发生错误");
            };

            //连接成功建立的回调方法
            websocket.onopen = function () {
                alert("WebSocket连接成功,可以开始发送消息了")
                $("#connectState").text("WebSocket连接成功")
            }

            //接收到消息的回调方法
            websocket.onmessage = function (event) {
                $("#connectState").text("收到的消息："+event.data);
            }

            //连接关闭的回调方法
            websocket.onclose = function () {
                $("#connectState").text("WebSocket连接关闭");
            }
        }
    }



    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        if (websocket !== null){
            closeWebSocket();
        }
    }


    //关闭WebSocket连接
    function closeWebSocket() {
        if (websocket !== null){
            websocket.close();
        }else {
            alert("websocket尚未建立连接！")
        }

    }

    //单个发送消息
    function pointSendMsg(){
        var msg = $("#pointMsg").val()
        send(msg)
    }

    //发送消息
    function send(msg) {
        if (websocket !== null){
            websocket.send(msg)
        }else {
            alert("websocket尚未建立连接！")
        }
        websocket.send(msg);
    }

    //响应式发送消息 这个响应式虽然在发消息，但是只有遇到回车的时候，才算是输入结束了，所以这里虽然一直发，但是shell控制台不会给出返回值
    $("#commandInput").on("input",function () {
        var command = $("#commandInput").val()
        $("#sendCommand").text("发送的命令："+ command)
		//将命令封装为json独享
		jsonCommand = {
			"cols": 0,
			"rows": 0,
			"command": command,
			"host": "172.16.154.99",
			"operate": "command",
			"password": "kedacom888",
			"port": 22,
			"username": "root"
		}
        send(JSON.stringify(jsonCommand))
    })

	//监听命令输入框的回车事件
	// 监听输入框的keydown事件
	$("#commandInput").keydown(function(event){
		// 检查是否按下了回车键（键码为13）
		if(event.keyCode === 13){
			var command = $("#commandInput").val()
			console.log("检测到您要提交命令了，提交的命令是："+command)
			//将命令封装为json独享
			jsonCommand = {
				"cols": 0,
				"rows": 0,
				"command": command+"\n",
				"host": "172.16.154.99",
				"operate": "command",
				"password": "kedacom888",
				"port": 22,
				"username": "root"
			}
			send(JSON.stringify(jsonCommand))
		}
	});


</script>
</html>
